<template>
  <div class="boxjiaotang">
    <van-nav-bar
      title="教堂"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
      :border="false"
    />
    <h1><van-icon name="like-o" color="pink" size="30" />近日举办的婚礼</h1>
    <div class="boxjiaotang-content-top">
      <router-link tag="div" to="qhdx">
        <!-- <span></span><span>求婚</span> -->
      </router-link>
      <router-link tag="div" to="jh">
        <!-- <span></span><span>结婚</span> -->
      </router-link>
      <div>
        <!-- <span></span><span>分手</span> -->
      </div>
    </div>
    <!-- 底部内容 -->
    <router-link class="boxjiaotang-content-down" tag="div" to="xt">
      <h1>
        <span>南城和陌墨的婚礼</span>
        <span>
          <van-icon name="underway-o" />
          12:00-16:00</span
        >
      </h1>

      <div>
        <i></i>
        <em></em>
        <i></i>
      </div>
    </router-link>
    <router-link class="boxjiaotang-content-down" tag="div" to="xt">
      <h1>
        <span>南城和陌墨的婚礼</span>
        <span><van-icon name="underway-o" />12:00-16:00</span>
      </h1>

      <div>
        <i></i>
        <em></em>
        <i></i>
      </div>
    </router-link>
    <router-link class="boxjiaotang-content-down" tag="div" to="xt">
      <h1>
        <span>南城和陌墨的婚礼</span>
        <span><van-icon name="underway-o" />12:00-16:00</span>
      </h1>

      <div>
        <i></i>
        <em></em>
        <i></i>
      </div>
    </router-link>
    <router-link class="boxjiaotang-content-down" tag="div" to="xt">
      <h1>
        <span>南城和陌墨的婚礼</span>
        <span><van-icon name="underway-o" />12:00-16:00</span>
      </h1>

      <div>
        <i></i>
        <em></em>
        <i></i>
      </div>
    </router-link>
    <router-link class="boxjiaotang-content-down" tag="div" to="xt">
      <h1>
        <span>南城和陌墨的婚礼</span>
        <span><van-icon name="underway-o" />12:00-16:00</span>
      </h1>

      <div>
        <i></i>
        <em></em>
        <i></i>
      </div>
    </router-link>
    <router-link class="boxjiaotang-content-down" tag="div" to="xt2">
      <h1>
        <span>南城和陌墨的婚礼</span>
        <span><van-icon name="underway-o" />12:00-16:00</span>
      </h1>

      <div>
        <i></i>
        <em></em>
        <i></i>
      </div>
    </router-link>
  </div>
</template>

<script>
export default {
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang='scss'>
.boxjiaotang {
  .van-nav-bar {
    line-height: 38px;
    background-color: #1a1a1a;
    border: none;
  }
  .van-nav-bar__title {
    color: white;
    font-size: 32px;
  }
  .van-nav-bar__content {
    margin: 30px 0px;
  }
  .van-icon-arrow-left:before {
    color: white;
    font-size: 32px;
  }
  h1 {
    color: pink;
    font-size: 28px;
    margin-top: 30px;
    text-indent: 0.6em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.161);
  }
  .boxjiaotang-content-top {
    width: 670px;
    height: 96px;
    // background-color: red;
    margin: 20px auto;
    display: flex;
    justify-content: space-between;
  }
  .boxjiaotang-content-top div {
    width: 210px;
    height: 96px;
    background-color: red;
    border-radius: 16px;
    display: flex;
    justify-content: space-around;
    line-height: 96px;
  }
  .boxjiaotang-content-top div:nth-child(1) {
    background-image: url(@/assets/img/home/Home-img/renwuimg/qiuhun.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .boxjiaotang-content-top div:nth-child(2) {
    background-image: url(@/assets/img/home/Home-img/renwuimg/hunli.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .boxjiaotang-content-top div:nth-child(3) {
    background-image: url(@/assets/img/home/Home-img/renwuimg/fenshou.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .boxjiaotang-content-top div span:nth-child(1) {
    width: 60px;
    height: 60px;
    display: block;
    background-color: #efefef;
    margin-top: 20px;
  }
  .boxjiaotang-content-top div span:nth-child(2) {
    font-size: 24px;
  }
  .boxjiaotang-content-down {
    width: 670px;
    height: 188px;
    background-color: rgba(128, 128, 128, 0.389);
    margin: 0 auto;
    border-radius: 16px;
    margin-top: 74px;
  }
  .boxjiaotang-content-down h1 {
    display: flex;
    height: 50px;
    justify-content: space-around;
    font-size: 24px;
    line-height: 50px;
    color: #cecece;
    margin-bottom: 24px;
  }
  .boxjiaotang-content-down div {
    width: 400px;
    height: 100px;
    display: flex;
    line-height: 100px;
    margin: 0 auto;
    justify-content: space-around;
  }
  .boxjiaotang-content-down div i {
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #cecece;
    background-image: url(@/assets/img/home/Home-img/31.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .boxjiaotang-content-down div em {
    width: 78px;
    height: 48px;
    // background-color: #cecece;
    margin-top: 30px;
    background-image: url(@/assets/img/home/Home-img/renwuimg/jz.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  boxjiaotang-content-down span {
    margin-bottom: 30px;
    display: block;
    width: 175px;
    height: 21px;
  }
}
</style>